<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="false"
    :show-close="true"
    class="order-kind-dialog medium-common-dialog-size mobile-el-dialog">
    <Title :title="isAddQuestion?'添加问题':'编辑问题'" font-size="16px" style="margin-bottom: 16px;"/>
    <div :style="{maxHeight: maxHeight}" class="body-form">
      <el-form
        ref="riskForm"
        label-width="78px"
        class="form">
        <el-form-item label="问题名称" prop="question">
          <remarkInput
            ref="remarkInput"
            :remark-list="formInfo.remarks"
            :is-add="false"
            :is-edit-question="!isAddQuestion"
          />
        </el-form-item>
        <div class="flex-center ml10">
          <el-checkbox v-model="formInfo.attribute">设为账号属性</el-checkbox>
          <el-tooltip class="item" placement="top" effect="dark">
            <div slot="content">当开启时，则标记该问题为账号属性</div>
            <tipIcon is-diy class="ml5"/>
          </el-tooltip>
          <span v-if="setSameQuestion" style="color: red; margin-left: 20px">
            同类型问题已存在，<span style="color: #406eff; cursor: pointer" @click="searchSameQuestion">快速查看</span>
          </span>
        </div>
      </el-form>
    </div>
    <div class="btn-container">
      <el-button :loading="confirmLoading" type="primary" size="small" @click="handleOk">确定</el-button>
      <el-button class="cancel-btn-style" size="small" style="width: 80px" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import remarkInput from '@/views/flyNotice/components/remarkInput';
import { generateUUID } from '@/utils/tools';
import { mapState } from 'vuex';
import { addQuestion, editQuestion } from '@/api/question';
import ElMessage from '@/utils/message';

export default {
  components: { Title, remarkInput },
  data() {
    return {
      dialogVisible: false,
      formInfo: {
        remarks: [],
        attribute: false
      },
      confirmLoading: false,
      maxHeight: '',
      setSameQuestion: false, // 新添加问题是否已存在
      isAddQuestion: 1 // 1-新建,0-编辑
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    initData(isAddQuestion = 1, data) {
      this.isAddQuestion = isAddQuestion;
      this.dialogVisible = true;
      const clientHeight = window.innerHeight;
      this.maxHeight = ((clientHeight * 2) / 3) + 'px';
      if (isAddQuestion) {
        this.$set(this.formInfo.remarks, 0, {
          type: 0,
          _uuid: generateUUID(),
          content: '',
          placeholder: '用户可输入回复该问题',
          selectList: []
        });
      } else {
        this.formInfo = data;
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.setSameQuestion = false;
    },
    async handleOk() {
      if (!this.$refs['remarkInput'].validate()) {
        return;
      }
      const params = { ...this.formInfo.remarks[0] };
      params.attribute = this.formInfo.attribute;
      delete params.placeholder;
      delete params._uuid;
      this.setSameQuestion = false;
      if (this.isAddQuestion) {
        const res = await addQuestion(params);
        if (res.code === 200) {
          ElMessage.success('新增成功');
        } else if (res.code === 501) {
          this.setSameQuestion = true;
          return;
        }
      } else {
        params.id = this.formInfo.id;
        const res = await editQuestion(params);
        if (res.code === 200) {
          ElMessage.success('编辑成功');
        } else if (res.code === 501) {
          this.setSameQuestion = true;
          return;
        }
      }
      this.$emit('updateData');
      this.handleClose();
    },
    searchSameQuestion() {
      const { remarks } = this.formInfo;
      const questionData = Array.isArray(remarks) && remarks.length && remarks[0] || null;
      if (questionData) {
        if (this.isAddQuestion) {
          this.$emit('searchSameQuestion', questionData);
          this.handleClose();
        } else {
          const url = this.$router.resolve({
            name: 'question',
            query: {
              content: questionData.content,
              type: questionData.type
            }
          });
          window.open(url.href, '_blank');
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.form {
  ::v-deep {
    .el-form-item {
      margin-bottom: 16px;
    }
    .el-form-item:first-of-type {
      margin-bottom: 4px;
    }
  }
}
.body-form {
  @include scrollBar($width: 6px)
}
.ml10 {
  margin-left: 10px;
  ::v-deep {
    .el-checkbox__label {
      padding-left: 4px;
    }
  }
}
.btn-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
</style>
